<style>
    .bag{
        color: #fff;
        width: 4px;
        text-align: center;
    }
    .bag-1{
        background-color: #e74c3c;
    }
    .bag-2{
        background-color: #3498db;
    }
    .bag-3{
        background-color: #f39c12;
    }
    .bag-4{
        background-color: #18bc9c;
    }
    .bag-5{
        background-color: #605ca8;
    }
    .bag-6{
        background-color: #e74c3c;
    }
    .bag-7{
        background-color: #3498db;
    }
    .bag-8{
        background-color: #f39c12;
    }
    .bag-9{
        background-color: #18bc9c;
    }
    .bag-0{
        background-color: #605ca8;
    }
</style>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div id="app" v-cloak>
        <div class="panel panel-default">
            <div class="panel-heading">商品信息</div>
            <div class="panel-body">
                <p><span>订单号：</span><small>{$row.order_no}</small> <strong></strong></p>
                <table class="table table-striped table-bordered table-hover table-nowrap">
                    <thead>
                    <tr style="background-color: rgb(242, 242, 242);">
                        <th class="text-center">
                            <div class="th-inner">名称</div>
                        </th>
                        <th class="text-center">
                            <div class="th-inner">品牌</div>
                        </th>
                        <th class="text-center">
                            <div class="th-inner">规格</div>
                        </th>
                        <th class="text-center">
                            <div class="th-inner">重量</div>
                        </th>
                        <th class="text-center">
                            <div class="th-inner">数量</div>
                        </th>
                        <th class="text-center">
                            <div class="th-inner">价格</div>
                        </th>
                        <th class="text-center">
                            <div class="th-inner">商品分类</div>
                        </th>
                        <th class="text-center">
                            <div class="th-inner">分箱规则</div>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in goods">
                        <td style=" vertical-align: middle; text-align: center"><strong>{{item.name}}</strong></td>
                        <td style=" vertical-align: middle; text-align: center">{{item.brand}}</td>
                        <td style=" vertical-align: middle; text-align: center">{{item.sku}}</td>
                        <td style=" vertical-align: middle; text-align: center">{{item.weight}}g</td>
                        <td style=" vertical-align: middle; text-align: center">{{item.number}}</td>
                        <td style=" vertical-align: middle; text-align: center">{{item.price}}</td>
                        <td style=" vertical-align: middle; text-align: center">
                            <select class="form-control" v-model="item.category_id">
                                <option value="0" >请选择商品分类</option>
                                <template v-for="category in categorydata">
                                    <option :value="category.id" >{{category.name}}</option>
                                </template>

                            </select>
                        </td>
                        <td style=" vertical-align: middle; text-align: center">
                            <select class="form-control" v-model="item.rule_id">
                                <option value="0" >请选择分箱规则</option>
                                <template v-for="rule in ruleList">
                                    <option :value="rule.id" >{{rule.name}}</option>
                                </template>

                            </select>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <th colspan="11" style="text-align: right;">
                            <span class="ordertext">收货地址:<samp class="text-info">{{address.province}}{{address.city}}{{address.area}}{{address.address}}</samp></span>
                            <span class="ordertext">{{address.name}}身份证信息:<samp class="text-info">{{address.idcard}}</samp> </span>
                            <button type="button" class="btn btn-xs btn-default" :data-tips-image="address.idcard_front">身份证正面</button>
                            <button type="button" class="btn btn-xs btn-default" :data-tips-image="address.idcard_reverse">身份证反面</button>
                        </th>
                    </tr>
                    </tfoot>
                </table>
                <div class="text-center">
                    <button type="button" class="btn btn-xs btn-info" @click="goPackage">开始分箱</button>
                </div>
            </div>
        </div>
        <div class="panel panel-default" v-if="packageList.length">
            <div class="panel-heading">包裹信息</div>
            <div class="panel-body">
                <table class="table table-striped table-bordered table-hover table-nowrap" v-for="(package,index) in packageList">
                    <tbody>
                    <tr style="background-color: #fff ">
                        <td rowspan="3" :class="`bag bag-${index}`" style="text-align: center; vertical-align: middle;">
                            <div>包</div>
                            <div>裹</div>
                            <div class="text-center">{{index+1}}</div>
                        </td>
                        <td style=" vertical-align: middle;">
                            包裹单号:<span class="color-gray">{$row.order_no}-{{index+1}}</span>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 0">
                            <table class="table table-striped table-bordered table-hover table-nowrap" style="margin-bottom: 0px">
                                <thead>
                                <tr style="background-color: #F2F2F2">
                                    <th style="text-align: center; vertical-align: middle;">
                                        <div class="th-inner">编号</div>
                                    </th>
                                    <th style="text-align: center; vertical-align: middle;">
                                        <div class="th-inner">名称</div>
                                    </th>
                                    <th style="text-align: center; vertical-align: middle;">
                                        <div class="th-inner">品牌</div>
                                    </th>
                                    <th style="text-align: center; vertical-align: middle;">
                                        <div class="th-inner">规格</div>
                                    </th>
                                    <th style="text-align: center; vertical-align: middle;">
                                        <div class="th-inner">重量</div>
                                    </th>
                                    <th style="text-align: center; vertical-align: middle;">
                                        <div class="th-inner">数量</div>
                                    </th>


                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,k,i) in package.goods">
                                    <td style="text-align: center; vertical-align: middle;">{{i+1}}</td>
                                    <td style="text-align: center; vertical-align: middle;"><strong>{{goods[item.id].name}}</strong></td>
                                    <td style="text-align: center; vertical-align: middle;">{{goods[item.id].brand}} </td>
                                    <td style="text-align: center; vertical-align: middle;">{{goods[item.id].sku}} </td>
                                    <td style="text-align: center; vertical-align: middle;">{{goods[item.id].weight}}g </td>
                                    <td style="text-align: center; vertical-align: middle;">{{item.order_goods_number}}</td>
                                    <input type="hidden" :name="`package[${index}][goods][${i}][brand]`" :value="goods[item.id].brand">
                                    <input type="hidden" :name="`package[${index}][goods][${i}][category_id]`" :value="goods[item.id].category_id">
                                    <input type="hidden" :name="`package[${index}][goods][${i}][name]`" :value="goods[item.id].name">
                                    <input type="hidden" :name="`package[${index}][goods][${i}][sku]`" :value="goods[item.id].sku">
                                    <input type="hidden" :name="`package[${index}][goods][${i}][price]`" :value="goods[item.id].price">
                                    <input type="hidden" :name="`package[${index}][goods][${i}][weight]`" :value="goods[item.id].weight">
                                    <input type="hidden" :name="`package[${index}][goods][${i}][number]`" :value="item.order_goods_number">
                                    <input type="hidden" :name="`package[${index}][goods][${i}][rule_id]`" :value="package.rule_id">
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>

                    <tr style="background-color: #fff">
                        <td style=" vertical-align: middle;">
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">包裹邮费:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input data-rule="required" class="form-control" :name="`package[${index}][delivery_price]`" type="text"  placeholder="请输入该包裹邮寄费用">
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">快递公司:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <select class="form-control" :name="`package[${index}][express_com]`" >
                                            <template v-for="com in comList">
                                                <option :value="com.code">{{com.name}}</option>
                                            </template>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label class="control-label col-xs-12 col-sm-2">快递编号:</label>
                                    <div class="col-xs-12 col-sm-8">
                                        <input data-rule="required" class="form-control" :name="`package[${index}][express_no]`" type="text"  placeholder="请输入快递单号">
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('生成包裹')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
